<template>
  <div>
    <el-form-item label-width="120px" label="输出文件格式">
      <el-radio-group v-model="title.type">
        <el-radio v-for="(item, i) in outFileType" :key="i" :label="item">{{ item }}</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label-width="120px" label="保存路径">
      <el-radio-group v-model="place" class="d-flex ai-center">
        <el-radio v-for="(item, i) in exportPlace" :key="i" :label="item">{{ item }}</el-radio>
        <el-input v-if="place != '原始文件夹'" v-model="title.output" @click="setDic"> </el-input>
      </el-radio-group>
    </el-form-item>
  </div>
</template>

<script lang="ts" setup>
import { outFileType, exportPlace, outPutDto } from '../components/tool'
import { ref, onMounted, PropType, watchEffect } from 'vue'

const place = ref('原始文件夹')
const props = defineProps({
  // title: Object as PropType<outPutDto>,
  // default: () => {
  //   return {
  //     type: 'mp4',
  //     output: ''
  //   }
  // }
  title: Object as PropType<outPutDto>,
  // eslint-disable-next-line vue/require-prop-types
  default: () => {
    return {
      type: 'mp4',
      output: ''
    }
  }
})
const title = props.title

function changePlace() {
  if (place.value == '原始文件夹') {
    title.output = ''
  } else {
    setDic()
  }
}
watchEffect(changePlace)
async function setDic() {
  const res = await window.electron.ipcRenderer.invoke('selectDic')
  title.output = res
}
onMounted(() => {
  console.info('props------', props)
})
// const state = reactive({
//   count: 0
// })
</script>
